<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <%@ include file="/include/service-base-header.jsp" %>
    <style>
        .table tbody tr td, .table th {
            padding: 5px;
        }
    </style>

    <title>desk</title>
</head>
<body>

<div class="container-fluid">
    <%@include file="/include/top-header.jsp" %>

    <div class="row">
        <%--//左侧面板--%>
        <div class="col-md-3 s-left-board">
            <%@include file="/include/left-board.jsp" %>
        </div>

        <%--右侧内容--%>
        <div class="col-md-9">
            <div class="row justify-content-end" style="padding-right: 15px;">
                <div class="form-group" style="margin: 0px;padding:0px;">
                    <div class="input-group">
                        <input type="text" id = "search_input" class="form-control mt-1" placeholder="Tel..."
                               style="border:0px;border-bottom:#a8a8a8 1px solid;background: transparent"/>

                        <button onclick="searchAction()"
                                class="btn btn-white btn-round btn-just-icon">
                            <i class="material-icons">search</i>
                        </button>
                    </div>
                </div>
            </div>

            <div class="card card-plain">
                <div class="card-header card-header-primary">
                    <div class="card-title">User List</div>
                    <p class="card-category">&nbsp;</p>
                </div>
                <div class="card-body">

                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                            <tr>
                                <th class="text-primary">
                                    #
                                </th>
                                <th class="text-primary">
                                    User
                                </th>
                                <th class="text-primary">
                                    Tel
                                </th>
                                <th class="text-primary">
                                    Total commission
                                </th>
                                <th class="text-primary">
                                    Rebate amount
                                </th>
                                <th class="text-primary">
                                    Registration time
                                </th>
                                <th class="text-primary">
                                    Operating
                                </th>
                            </tr>
                            </thead>
                            <tbody id="tbody">

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <nav aria-label="page">
                <ul class="pagination justify-content-center" id="p1">
                </ul>
            </nav>
        </div>
    </div>
</div>
</body>
<script>

    var user_list;

    //每页显示条数
    var page_count = 15;

    getUserList();

    /**
     * 获取用户列表
     */
    function getUserList() {
        var salesId = "<%=session.getAttribute("salesId")%>";

        $.ajax({
            url: baseUrl.base + 'sales/userList',
            type: 'post',
            data: {'saleId': salesId},
            success: function (data) {

                if (data.code == 0) {

                    var res = data.results;

                    user_list = res;

                    cutPagination(1);

                    // 配置分页
                    $("#p1").pagination({
                        totalData: user_list.length,
                        showData: page_count,
                        callback: function (idx) {
                            cutPagination(idx);
                        }
                    });
                }
            }
        })
    }

    /**
     * 分页
     * @param page 从1开始
     */
    function cutPagination(page) {

        var start = (page - 1) * page_count;
        var end = start + page_count;

        if (end > user_list.length) {
            end = user_list.length;
        }

        $("#tbody").empty();
        for (var i = start; i < end; i++) {
            var user = user_list[i];

            var user_name = user.userName;
            var user_tel = user.userPhone;
            var user_total = user.rechageMoney;
            var user_rebate = user.backMoney;
            var user_time = user.createTime;
            var user_id = user.userId;

            var tr = document.createElement("tr");
            var td = document.createElement("td");
            var text = document.createTextNode(i + 1 + "");
            td.appendChild(text);
            tr.appendChild(td);

            var td = document.createElement("td");
            var text = document.createTextNode(user_name);
            td.appendChild(text);
            tr.appendChild(td);

            var td = document.createElement("td");
            var text = document.createTextNode(user_tel);
            td.appendChild(text);
            tr.appendChild(td);

            var td = document.createElement("td");
            var text = document.createTextNode(user_total + "KSH");
            td.appendChild(text);
            tr.appendChild(td);

            var td = document.createElement("td");
            var text = document.createTextNode(user_rebate + "KSH");
            td.appendChild(text);
            tr.appendChild(td);

            var td = document.createElement("td");
            var text = document.createTextNode(timestampToTime(user_time));
            td.appendChild(text);
            tr.appendChild(td);

            var td = document.createElement("td");
            var button = document.createElement("button");
            button.setAttribute("type", "button");
            button.setAttribute("class", "btn btn-info btn-sm");
            button.setAttribute("value", "Detail");
            button.setAttribute("user_id", user_id);
            var url = '/bocai-sale/s/recharge-detail.do?userId=' + user_id;
            button.setAttribute("onclick", "window.location.href='" + url + "'");
            td.appendChild(button);

            var text = document.createTextNode("Details");
            button.appendChild(text);

            tr.appendChild(td);

            document.getElementById("tbody").append(tr);
        }
    }

    /**
     * 搜索
     */
    function searchAction() {
        var keyword = $('#search_input').val();

        if (null == keyword || keyword == "") {
            cutPagination(1);
            return;
        }

        $("#tbody").empty();

        for(var i = 0;i < user_list.length;i ++){
            var user = user_list[i];
            var user_phone = user.userPhone;
            if (user_phone.indexOf(keyword) != -1){

                var user_name = user.userName;
                var user_tel = user.userPhone;
                var user_total = user.rechageMoney;
                var user_rebate = user.backMoney;
                var user_time = user.createTime;
                var user_id = user.userId;

                var tr = document.createElement("tr");
                var td = document.createElement("td");
                var text = document.createTextNode(i + 1 + "");
                td.appendChild(text);
                tr.appendChild(td);

                var td = document.createElement("td");
                var text = document.createTextNode(user_name);
                td.appendChild(text);
                tr.appendChild(td);

                var td = document.createElement("td");
                var text = document.createTextNode(user_tel);
                td.appendChild(text);
                tr.appendChild(td);

                var td = document.createElement("td");
                var text = document.createTextNode(user_total + "KSH");
                td.appendChild(text);
                tr.appendChild(td);

                var td = document.createElement("td");
                var text = document.createTextNode(user_rebate + "KSH");
                td.appendChild(text);
                tr.appendChild(td);

                var td = document.createElement("td");
                var text = document.createTextNode(timestampToTime(user_time));
                td.appendChild(text);
                tr.appendChild(td);

                var td = document.createElement("td");
                var button = document.createElement("button");
                button.setAttribute("type", "button");
                button.setAttribute("class", "btn btn-info btn-sm");
                button.setAttribute("value", "Detail");
                button.setAttribute("user_id", user_id);
                var url = '/bocai-sale/s/recharge-detail.do?userId=' + user_id;
                button.setAttribute("onclick", "window.location.href='" + url + "'");
                td.appendChild(button);

                var text = document.createTextNode("Details");
                button.appendChild(text);

                tr.appendChild(td);

                document.getElementById("tbody").append(tr);
            }
        }
    }


</script>

</html>